<template>
  <div>
    <el-card class="box-card">
      <!-- 检索 -->
      <div class="form_search">
        <el-form
          ref="form"
          :model="searchForm"
          size="small"
        >
          <el-form-item
            label="搜索甲"
            label-width="80px"
          >
            <el-input
              v-model="searchForm.one"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="搜索已"
            label-width="80px"
          >
            <el-input
              v-model="searchForm.two"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="搜索丙"
            label-width="80px"
          >
            <el-input
              v-model="searchForm.three"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label-width="30px">
            <div style="display: flex;">
              <el-button
                icon="el-icon-search"
                type="primary"
                @click="Search"
              >检索</el-button>
              <el-button
                icon="el-icon-refresh"
                @click="Reset"
              >重置</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-button
          icon="el-icon-plus"
          type="primary"
          size="small"
          @click="addList"
        >新增</el-button>
        <el-button
          icon="el-icon-close"
          type="danger"
          size="small"
        >多选删除</el-button>
      </div>
      <!-- 表格 height="100%" -->
      <div class="table_height">
        <el-table
          :data="tableData"
          border
          stripe
          height="100%"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            align="center"
            type="selection"
            width="55"
          >
          </el-table-column>
          <el-table-column type="expand">
            <template slot-scope="props">
              <ul class="expand_ul">
                <li>
                  <div>日期</div>
                  <div>{{props.row.date}}</div>
                </li>
                <li>
                  <div>姓名</div>
                  <div>{{props.row.date}}</div>
                </li>
                <li>
                  <div>地址</div>
                  <div>{{props.row.address}}</div>
                </li>
              </ul>
            </template>
          </el-table-column>
          <el-table-column
            label="#"
            align="center"
            type="index"
            width="50"
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="date"
            label="日期"
            sortable
            width="180"
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="name"
            label="姓名"
            width="180"
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="address"
            label="地址"
          >
          </el-table-column>
          <el-table-column
            fixed="right"
            align="center"
            label="操作"
            width="210"
          >
            <template slot-scope="scope">
              <el-button
                @click="previewClick(scope.row)"
                icon="el-icon-view"
                type="primary"
                size="mini"
              ></el-button>
              <el-button
                @click="editClick(scope.row)"
                icon="el-icon-edit"
                type="success"
                size="mini"
              ></el-button>
              <el-button
                @click="delClick(scope.row)"
                icon="el-icon-delete"
                type="danger"
                size="mini"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="el-pagination-box">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="10"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 修改和新增弹框 -->
    <el-dialog
      :title="diaTitle"
      :visible.sync="addDialogVisible"
      width="30%"
      top="8vh"
      :before-close="handleClose"
    >
      <el-form
        ref="formRef"
        :rules="diaRules"
        :model="form"
        label-width="90px"
      >
        <el-form-item
          label="活动名称"
          prop="name"
        >
          <el-input
            v-model="form.name"
            placeholder="请输入活动名称"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="活动区域"
          prop="region"
        >
          <el-select
            v-model="form.region"
            placeholder="请选择活动区域"
          >
            <el-option
              label="区域一"
              value="shanghai"
            ></el-option>
            <el-option
              label="区域二"
              value="beijing"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动时间">
          <el-col :span="10">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.date1"
            ></el-date-picker>
          </el-col>
          <el-col
            class="line"
            :span="1"
          >
            <p style="text-align: center;">-</p>
          </el-col>
          <el-col :span="10">
            <el-time-picker
              placeholder="选择时间"
              v-model="form.date2"
              style="width: 100%;"
            ></el-time-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="即时配送">
          <el-switch v-model="form.delivery"></el-switch>
        </el-form-item>
        <el-form-item label="活动性质">
          <el-checkbox-group v-model="form.type">
            <el-checkbox
              label="美食/餐厅线上活动"
              name="type"
            ></el-checkbox>
            <el-checkbox
              label="地推活动"
              name="type"
            ></el-checkbox>
            <el-checkbox
              label="线下主题活动"
              name="type"
            ></el-checkbox>
            <el-checkbox
              label="单纯品牌曝光"
              name="type"
            ></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="特殊资源">
          <el-radio-group v-model="form.resource">
            <el-radio label="线上品牌商赞助"></el-radio>
            <el-radio label="线下场地免费"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="活动形式">
          <el-input
            type="textarea"
            v-model="form.desc"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="resetForm('formRef')">取 消</el-button>
        <el-button
          type="primary"
          @click="onSubmit('formRef')"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 点击详情 -->
    <el-dialog
      :title="diaTitle"
      :visible.sync="detailsDialogVisible"
      width="30%"
      top="8vh"
    >
      <div
        class="detailsBox"
        v-for="(item,index) in detailsList"
        :key="index"
      >
        <div class="detailsFlex">
          <div>日期</div>
          <div>{{item.date}}</div>
        </div>
        <div class="detailsFlex">
          <div>姓名</div>
          <div>{{item.name}}</div>
        </div>
        <div class="detailsFlex">
          <div>地址</div>
          <div>{{item.address}}</div>
        </div>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="detailsDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  components: {
  },
  data () {
    return {
      // 表格数据-----------------------------------------------------------------------
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      // -----------------------------------------------------------------------
      // 表格传参
      searchForm: {
        one: '',
        two: '',
        three: ''
      },
      currentPage4: 1, // 当前页数
      addDialogVisible: false, // dialog对话框默认关闭
      detailsDialogVisible: false, // 详情弹框
      diaTitle: '', // 对话框标题
      allId: '', // 全局id
      detailsList: [],
      // 新增修改-----------------------------------------------------------------------
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      // 表单校验-----------------------------------------------------------------------
      diaRules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ]
      }
    }
  },
  mounted () {
    this.getTabList()
  },
  methods: {
    // 表格数据渲染
    getTabList () {

    },
    // 点击新增功能
    addList () {
      this.diaTitle = '新增功能'
      this.addDialogVisible = true
    },
    // 弹框确定功能
    onSubmit (formName) {
      if (this.allId) {
        // 提交前校验必填字段
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$refs[formName].resetFields() // 取消表单校验
          } else {
            return false
          }
        })
      } else {
        // 提交前校验必填字段
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$refs[formName].resetFields() // 取消表单校验
          } else {
            return false
          }
        })
      }
    },
    // 弹框取消
    resetForm (formName) {
      this.addDialogVisible = false // 弹框关闭
      this.detailsDialogVisible = false
      this.$refs[formName].resetFields() // 取消表单校验
    },
    // 点击查看功能
    previewClick (row) {
      const str = []
      str.push(row)
      this.detailsList = str
      this.diaTitle = '详情'
      this.detailsDialogVisible = true
    },
    // 点击编辑功能
    editClick (id) {
      this.diaTitle = '修改功能'
      this.addDialogVisible = true
      this.allId = id
    },
    // 点击删除功能
    delClick (id) {
      console.log('id', id)
      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.$message.success({ message: '删除成功' })
      }).catch(() => {
        this.$message.info({ message: '已取消删除' })
      })
    },
    // dialog关闭前的回调
    handleClose () {
      this.addDialogVisible = false
      this.detailsDialogVisible = false
    },
    // 重置功能
    Reset () {
      this.searchForm = {
        one: '',
        two: '',
        three: ''
      }
      this.getTabList()
    },
    // 检索功能
    Search () {

    },
    // 每页条数
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.getTabList()
    },
    // 当前页数
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.getTabList()
    },
    // 多选
    handleSelectionChange (val) {
      console.log('val', val)
    }
  }
}
</script>

<style lang="less" scoped>
.el-card {
  height: calc(100vh - 80px);
}
.form_search {
  width: 100%;
  background: #f6f6f6;
  padding: 10px;
  margin-bottom: 20px;
  box-sizing: border-box;
  .el-form {
    display: flex;
    .el-form-item {
      width: 25%;
      margin-bottom: 0 !important;
    }
  }
}
.table_height {
  height: calc(100vh - 270px);
}
.detailsBox {
  width: 100%;
  .detailsFlex {
    display: flex;
    height: 40px;
    line-height: 40px;
    justify-content: space-around;
    border-bottom: 1px solid #ccc;
  }
}
.detailsBox:nth-child(1) {
  border-top: 1px solid #ccc;
}
.detailsBox .detailsFlex div:nth-child(1) {
  width: 20%;
  text-align: center;
}
.detailsBox .detailsFlex div:nth-child(2) {
  width: 80%;
  padding-left: 20px;
  box-sizing: border-box;
}
.expand_ul {
  width: 80%;
  margin: 0 20px;
  border-top: 1px solid #ccc;
  li {
    display: flex;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #ccc;
  }
}
.expand_ul li div:nth-child(1) {
  width: 20%;
  text-align: center;
}
.expand_ul li div:nth-child(2) {
  width: 80%;
  padding-left: 20px;
  box-sizing: border-box;
}
</style>
